<template>
  <div>
    <!-- <BaseForm
      ref="searchForm"
      type="search"
      :items="formItems"
      v-model:form="searchParams"
      @search="handleSearch"
      :defaultHeight="284"
    >
      <template #suffix-button>
        <el-button type="primary" @click.prevent="handleEdit({})">
          <el-icon><Plus /></el-icon>
          添加
        </el-button>
      </template>
    </BaseForm> -->
    <el-form
      ref="ruleFormRef"
      :model="searchParams"
      style="padding: 16px 16px 0 16px"
      :inline="true"
    >
      <el-form-item label="台区名称">
        <el-input
          suffix-icon="xxxx"
          v-model="searchParams.areaName"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="供电单位">
        <el-select
          v-model="searchParams.powerId"
          filterable
          placeholder="请选择"
          @change="changePower"
          clearable
        >
          <el-option
            v-for="item in powerSupplyIdList"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="供电线路">
        <el-select
          v-model="searchParams.lineId"
          filterable
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in lineIdList" 
            :key="item.value"
            :value="item.value"
            :label="item.label"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">
          <el-icon>
            <Search />
          </el-icon>
          查询
        </el-button>
        <el-button @click="resetForm">
          <el-icon>
            <RefreshLeft />
          </el-icon>
          重置
        </el-button>
        <el-button type="primary" @click.prevent="handleEdit({})">
          <el-icon>
            <Plus />
          </el-icon>
          添加
        </el-button>
      </el-form-item>
    </el-form>

    <BaseTable
      ref="baseTable"
      :getTableDataFn="basicConfigService.pageListGridAreaResDto"
      :searchParams="searchParams"
      :serial="true"
    >
      <el-table-column prop="areaName" label="台区名称" />
      <el-table-column
        prop="areaPowerLineResDtoList"
        label="供电单位(供电线路)"
        minWidth="120"
      >
        <template #default="scope">
          <div
            style="margin-left: 2px; margin-right: 2px; margin-top: 5px"
            v-for="item in scope.row.areaPowerLineResDtoList"
            type="info"
            :key="`${item.powerId}-${item.lineId}`"
          >
            <span v-if="getAddress(item).length < 10">{{
              getAddress(item)
            }}</span>
            <el-tooltip
              v-else
              class="box-item"
              effect="dark"
              :content="getAddress(item)"
              placement="top"
            >
              <span class="text_ellipsis">{{ getAddress(item) }}</span>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="description" label="描述">
        <template #default="scope">
          <Tooltip :text="scope.row.description"></Tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="communitySimpleDtoList"
        label="关联片区/村社（请到片区/村社管理设置关联）"
        minWidth="140"
      >
        <template #default="scope">
          <Tooltip
            :text="
              scope.row.communitySimpleDtoList
                ?.map((e) => e.communityName)
                ?.join('、')
            "
          ></Tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="最后修改时间" width="170">
        <template #header>
          <span>最后修改时间</span>
          <SortTable
            :sortTablekey="sortTablekey"
            @click="sortTablekey = 1"
            :handleSearch="handleSearch"
          ></SortTable>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="100">
        <template #default="scope">
          <el-link
            :underline="false"
            link
            type="primary"
            size="small"
            @click.prevent="handleEdit(scope.row)"
            >编辑</el-link
          >
          <el-link
            :underline="false"
            link
            type="danger"
            size="small"
            @click.prevent="handleDel(scope.row)"
            >删除</el-link
          >
        </template>
      </el-table-column>
    </BaseTable>
    <EditForm
      v-if="visibleEditForm"
      v-model:dialogVisible="visibleEditForm"
      :item="item"
      :handleSearch="handleSearch"
      :powerSupplyIdList="powerSupplyIdList"
      :lineIdList="lineIdList"
    ></EditForm>
  </div>
</template>

<script setup lang="ts">
import EditForm from './stationAreaEditForm.vue'
import { basicConfigService } from '@/api/basicConfig'
import openMsgBox from '@/hooks/messageBox.js'
import { commonService } from '@/api/common'
import { powerService } from '@/api/power'
import { lineService } from '@/api/line'
const lineIdList = ref([])
const powerSupplyIdList = ref([])
const formItems = ref([
  {
    name: '台区名称',
    key: 'areaName',
    type: 'input',
  },
  {
    name: '供电单位',
    key: 'powerId',
    clearable: true,
    type: 'select',
    options: powerSupplyIdList,
  },
  {
    name: '供电线路',
    key: 'lineId',
    clearable: true,
    type: 'select',
    options: lineIdList,
  },
])
const searchParams = ref({
  areaName: '',
  lineId: '',
  powerId: '',
})
const changePower = () => {
  if (searchParams.value.powerId) {
    searchParams.value.lineId = ''
  }
  getLineList()
}

const item = ref({})
const baseTable = ref(null)
const sortTablekey = ref(1)
const handleSearch = (data = { sort: undefined }, e = '') => {
  if (e != 'sort') sortTablekey.value = 0
  baseTable.value.handleSearch({
    ...searchParams.value,
    updateTimeOrder: data?.sort,
  })
}
const visibleEditForm = ref(false)
const handleEdit = (row) => {
  item.value = { ...row }
  visibleEditForm.value = true
}
const handleDel = (row) => {
  openMsgBox(
    {},
    () => {
      return basicConfigService.areaBatchDel({ data: [row.areaId] })
    },
    () => {
      handleSearch()
    }
  )
}
const getPowerList = () => {
  powerService.getPowerList({ data: {} }).then((res) => {
    powerSupplyIdList.value = res.data.map((n) => {
      return {
        label: n.powerName,
        value: n.powerId,
      }
    })
  })
}
const getLineList = () => {
  lineService
    .getLineList({ data: { powerId: searchParams.value.powerId } })
    .then((res) => {
      lineIdList.value = res.data.map((n) => {
        return {
          label: n.lineName,
          value: n.lineId,
        }
      })
    })
}

onMounted(() => {
  getPowerList()
  getLineList()
})
const getAddress = (row) => {
  if (row.lineName) return `${row.powerName}（ ${row.lineName} ）`
  else return row.powerName
}
const resetForm = () => {
  searchParams.value = {
    areaName: '',
    lineId: '',
    powerId: '',
  }
  getLineList()
  handleSearch()
}
</script>

<style lang="less" scoped></style>
